/** 
  申请变更课程成绩
*/
<template>
  <div class="apply-change-score-container">
    <div style="height: 40px;">
      <el-breadcrumb separator="/" class="float-left" style="padding-top: 8px;">
        <el-breadcrumb-item :to="{ path: '/courseScoreApplyChange' }">
          <span @click="backToMain()">{{ $t('courseScoreApplyChange.courseScoreApplyChange') }}</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('scoreMangementBase.apply') }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="float-right">
        <el-button type="text" @click="backToMain()">{{ $t('common.btn.back') }}</el-button>
      </div>
    </div>
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
      <div class="title">{{ $t('scoreChangeApply.changeDetail') }}</div>
      <el-form :model="changeDialog" ref="changeDialog" label-position="right" label-width="90px">
        <table class="table-style-baseinfos">
          <tbody>
            <tr>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.courseCode') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.courseCode }}</td>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.courseName') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.courseName }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.courseNum') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.courseNum }}</td>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.courseType') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.courseLabelName }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('courseScoreMana.entryPerson') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.importUser }}</td>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.entryTime') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.importTime }}</td>
            </tr>
          </tbody>
        </table>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('scoreChangeApply.applyExplanation') + '：'" prop="applyExplanation" :rules="[{ required: true, message: $t('scoreChangeApply.requireApplyExplanation'), trigger: 'blur'}]">
              <el-input type="textarea" :rows="5" :placeholder="$t('common.pla.pleaseInput')" v-model="changeDialog.applyExplanation" :maxlength="500" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              :label="$t('scoreChangeApply.evidence') + '：'" 
              prop="evidence"
              style="margin: 12px 0;"
              :rules="[{ required: true, message: $t('scoreChangeApply.requireEvidence'), trigger: 'change'}]">
                <el-upload
                  v-model="changeDialog.evidence"
                  class="upload-info"
                  action="/api/commonservice/obsfile/uploadfile"
                  :data="uploadConfig.data"
                  :on-exceed="handleExceed"
                  :before-upload="(file) => beforeUpload(file, 111, 'foreignInstitutionLetter')"
                  :on-success="(response, file, fileList) => handlerUploadSuccess(response, file, fileList, 111, 'foreignInstitutionLetter')"
                  :before-remove="(file, fileList) => handlerBeforeRemove(file, fileList, 111, 'foreignInstitutionLetter')"
                  :on-remove="(file, fileList) => handlerRemove(file, fileList, 111, 'foreignInstitutionLetter')"
                  :on-error="(err, file, fileList) => handlerUploadError(err, file, fileList, 111, 'foreignInstitutionLetter')"
                  :on-preview="(file) => downloadMaterial(file, 111, 'foreignInstitutionLetter')"
                  accept="application/pdf"
                  :limit="1"
                  :file-list="fileList">
                  <el-button size="small" type="primary">{{ $t('graduateBase.chooseFile') }}</el-button>
                </el-upload>
                <span class="file-tip-info">{{ $t('scoreChangeApply.evidenceTip') }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="footer-container">
        <el-button @click="cancel()">{{ $t('common.btn.cancel') }}</el-button>
        <el-button type="primary" @click="submit()">{{ $t('common.btn.submit') }}</el-button>
      </div>
    </el-card>
    <!-- 确认弹框开始 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="$t('scoreChangeApply.gradeChangeTitle')"
      width="400px">
      <span>{{ basicInfo.courseName }}({{ basicInfo.courseCode }}){{ $t('scoreChangeApply.gradeChangeTip') }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t('common.btn.cancel') }}</el-button>
        <el-button type="primary" @click="confirmChange">{{ $t('common.btn.confirm') }}</el-button>
      </span>
    </el-dialog>
    <!-- 确认弹框结束 -->
  </div>
</template>
<script>
import scoreManagementApi from 'common/src/api/scoreManagement/scoreManagement';
export default {
  components: {
  },
  data () {
    return {
      dialogVisible: false,
      fileList: [],
      uploadConfig: {
        data: { bucketname: 'face', folderpath: 'file' },
      },
      changeDialog: {
        applyExplanation: '',
        evidence: ''
      },
      basicInfo: this.detailInfo,
      fileInfo: {
        upFileName: '',
        upFileKey: ''
      }
    }
    
  },
  props: {
    detailInfo: {
      type: Object,
      default: () => {}
    }
  },
  created() {
  },
  mounted() {

  },
  methods: {
    // 返回主页
    backToMain() {
      this.$emit('refresh-main-page')
    },
    // 取消
    cancel() {
      this.$confirm(this.$t('scoreMangementBase.cancelTip'), this.$t('scoreMangementBase.prompt'), {
        confirmButtonText: this.$t('scoreMangementBase.confirm'),
        cancelButtonText: this.$t('scoreMangementBase.cancel'),
        type: 'warning'
      }).then(() => {
        this.$emit('refresh-main-page')
      })
    },
    // 提交
    submit() {
      this.$refs['changeDialog'].validate((valid) => {
        if (valid) {
          this.dialogVisible = true
        }
      })
    },
    // 确认提交
    confirmChange() {
      this.$refs['changeDialog'].validate((valid) => {
        if (valid) {
          let params = {
            "id": this.basicInfo.id,
            "examId": this.basicInfo.examId,
            "changeApplyContent": this.changeDialog.applyExplanation,
            "enclosureFileUrl": this.fileInfo.upFileKey,
            "enclosureFileName": this.fileInfo.upFileName,
            "status": 0
          }
          scoreManagementApi.applyOrEditScoreChangeSubmit(params).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('scoreMangementBase.submitSuccessfully'))
              this.$emit('refresh-main-page')
            }
          })
        }
      })
    },
    // 文件类方法开始
    handleExceed(files, fileList) {
      this.$message.error(this.$t('externamExchangeBase.limitOneFile'))
    },
    handlerBeforeRemove(file, fileList, fileNumber, key) {
      // if (this.fileFlag) {
      //   return this.$delConfirm().then(_ => {})
      // }
    },
    handlerRemove(file, fileList, fileNumber, key) {
      // this.fileInfo.map((value, index) => {
      //   if (fileNumber === value.number) {
      //     value.fileId = ''
      //     value.fileName = ''
      //     this.applyInfo[key] = ''
      //   }
      // })
      this.fileInfo.upFileName = ''
      this.fileInfo.upFileKey = ''
      this.changeDialog.evidence = ''
    },
    beforeUpload(file, fileNumber, key) {
      const fileSizeFlag = file.size && file.size / 1024 / 1024 / 1024 < 500
      let fileNameLength = file.name.length <= 64
      let fileName = file.name.substring(0, file.name.lastIndexOf('.'))
      let fileNameRepeat = false
      let fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
      const uploadFlag = fileType === 'jpg' || fileType === 'png' || fileType === 'gif' || fileType === 'doc' || fileType === 'docx' || fileType === 'xlsx'
      // this.fileInfo.map((value, index) => {
      //   if (fileNumber === value.number) {
      //     value.fileId = file.uid
      //     value.fileName = file.name
      //     this.applyInfo[key] = value.fileId
      //   }
      // })
      if (!uploadFlag) {
        window.vueApp.showMsgBox({
          message: this.$t("minor.approve.uploadFileError"),
          callback: () => {
          }
        })
      }
      if (!fileSizeFlag) {
        window.vueApp.showMsgBox({
          message: this.$t("scoreChangeApply.fileSizeTip"),
          callback: () => {
          }
        })
      }
      if (!fileNameLength) {
        window.vueApp.showMsgBox({
          message: this.$t("externamExchangeBase.uploadNameLength"),
          callback: () => {
          }
        })
      }
      // this.fileInfo.map((value) => {
      //   if (value.fileName.length > 0) {
      //     let fileNameStr = value.fileName.substring(0, value.fileName.lastIndexOf('.'))
      //     let fileTypeStr = value.fileName.substring(value.fileName.lastIndexOf('.') + 1)
      //     if (fileType === fileTypeStr && fileNameStr === fileName && value.number !== fileNumber) {
      //       fileNameRepeat = true
      //     }
      //   }
      // })
      if (fileNameRepeat) {
        window.vueApp.showMsgBox({
          message: this.$t("externamExchangeBase.uploadNameRepeat"),
          callback: () => {
          }
        })
      }
      this.fileFlag = (uploadFlag && fileSizeFlag && fileNameLength && !fileNameRepeat)
      if (!(uploadFlag && fileSizeFlag && fileNameLength && !fileNameRepeat)) {
        return false
      }
    },
    handlerUploadSuccess(response, file, fileList, fileNumber, key) {
      let responseCode = response.code
      if (responseCode === 200) {
        // this.fileInfo.map((value, index) => {
        //   if (fileNumber === value.number) {
        //     value.fileId = Object.values(response.data)[0].objectkey
        //     value.fileName = Object.values(response.data)[0].fileName
        //     this.applyInfo[key] = value.fileId
        //   }
        // })
        this.fileInfo.upFileName = Object.values(response.data)[0].fileName
        this.fileInfo.upFileKey = Object.values(response.data)[0].objectkey
        this.changeDialog.evidence = this.fileInfo.upFileKey
      }
    },
    handlerUploadError(response, file, fileList, fileNumber, key) {
      this.$message({
        message: this.$t('graduateBase.uploadFail'),
        type: 'error',
      })
      // this.fileInfo.map((value, index) => {
      //   if (fileNumber === value.number) {
      //     value.fileId = ''
      //     value.fileName = ''
      //     this.applyInfo[key] = ''
      //   }
      // })
    },
    downloadMaterial(file, fileNumber, key) {
      if (file.url) {
        downloadfile(file.url);
      } else if (file.status === 'success' && file.response.data) {
        downloadfile(file.response.data[file.name].objectkey)
      }
    },
    // 文件类方法结束
  }
}
</script>

<style lang="scss" scoped>
  .apply-change-score-container ::v-deep {
    .title {
      margin-bottom: 20px;
      font-weight: bold;
      font-size: 18px;
    }
    .table-style-baseinfos {
      border-collapse: collapse;
      table-layout: fixed;
      word-break: break-all;
      background-color: rgba(210, 212, 214, 1);
      border-width: 0.5px;
      border-style: solid;
      border-color: rgba(210, 212, 214, 1);
      width: 100%;
      font-weight: 401;
      font-style: normal;
      font-size: 14px;
      color: #8896a7;
      margin-bottom: 20px;
    }
    .table-style-baseinfos .text-right-background-color {
      background-color: #edf1f5;
      text-align: right;
    }
    .text-left-background-none {
      text-align: left;
    }
    .table-style-baseinfos td {
      width: 25%;
      background-color: rgba(255, 255, 255, 1);
      border-width: 0.5px;
      border-style: solid;
      border-color: rgba(210, 212, 214, 1);
      font-weight: 401;
      font-style: normal;
      font-size: 14px;
      color: #2b3b4e;
      height: 32px;
      padding: 0 10px;
    }
    .score-container {
      .el-form-item {
        margin: 10px 0;
      }
      .el-form-item__content {
        margin-left: 0!important;
      }
    }
    .upload-info {
      display: inline-block;
      width: 100px;
    }
    .footer-container {
      width: 100%;
      text-align: right;
      padding: 15px;
    }
  }
</style>